<template>
  <div class="login-container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form ref="loginForms" :model="loginForm" :rules="rules" class="login-form">
          <h1>Hello</h1>
          <h2>欢迎来到后台管理</h2>
          <el-form-item prop="username">
            <el-input placeholder="请输入账号" v-model="loginForm.username" :prefix-icon="User" type="text"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="loginForm.password" :show-password="true" :prefix-icon="Lock" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="isLoading" @click="login" class="login-btn" type="primary" size="default">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue' 
import { useUserStore } from '@/store/modules/user'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
import { getTime } from '@/utils/time'


// 收集数据
const loginForm = reactive({
  username: 'admin',
  password: '111111'
})

// 登录按钮回调
const loginForms = ref()
const useUser = useUserStore()
const router = useRouter()
const route = useRoute()
const isLoading = ref(false)
const login = async () => {
  // 表单校验通过再发请求
  await loginForms.value.validate()
  isLoading.value = true
  try {
    await useUser.userLogin(loginForm)
    const redirect:any = route.query.redirect
    router.push({path: redirect || '/'})
    // 登录成功提示
    ElNotification({
      type: 'success',
      message: '登录成功',
      title: `${getTime()}好,欢迎回来`
    })
    isLoading.value = false
  } catch(error) {
    ElNotification({
      type: 'error',
      message: (error as Error).message
    })
    isLoading.value = false
  }
}

// 定义表单校验需要的ruels对象
const rules = {
  username: [
    { min: 5, max:12, message: '账号长度必须在5-12位', trigger: 'change' },
  ],
  password: [
    { min: 6, max:15, message: '密码长度必须在6-15位', trigger: 'change' },
  ]
}

// 自定义规则
// const validateName = (rule: any, value: any, callback: any) => {
//   if(/^\d{5,10}&/.test(value)) {
//     callback()
//   } else {
//     callback(new Error('账号长度必须在5-12位'))
//   }
// }

// const rules = {
//   username: [
//     {  validator: validateName, trigger: 'change' },
//   ]
// }

</script>

<style lang="scss" scoped>
  .login-container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;
    @media screen and (max-width: 767px) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .login-form {
      width: 80%;
      margin-top: 30vh;
      background: url('@/assets/images/login_form.png') no-repeat;
      background-size: cover;
      padding: 40px;
      @media screen and (max-width: 767px) {
        margin-top: 0;
        flex: 1;
        width: 350px;
      }
      h1 {
        color: white;
        font-size: 40px;
      }
      h2 {
        font-size: 20px;
        color: white;
        margin: 20px 0;
      }
      .login-btn {
        width: 100%;
      }
    }
  }
</style>
